﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>无标题文档</title>
	</head>
	<style type="text/css">
		body {
			background-color: #3994EE;
			text-align: center;
		}
		
		.div1 {
			background-image: url(img/1.png);
			width: 118px;
			height: 60px;
			color: #F6F6F6;
			float: left;
		}
		
		.div1:hover {
			background-image: url(img/2.png);
		}
		
		.div1:active {
			background-image: url(img/3.png);
		}
		
		a {
			text-decoration: none;
		}
		
		.div2 {
			height: 1px;
		}
		
		.div3 {
			border: #0CF solid 2px;
			height: 600px;
			margin-top: 65px;
			background-color: #E7FEED;
		}
		
		.table tr {
			font-family: "幼圆";
			height: 35px;
			background-color: #e7ebff;
			color: #5A5A5A;
			line-height: 1;
			font-size: 18px;
		}
		
		.table tr:hover {
			text-decoration: none;
			line-height: 1;
			background-color: #F0FFF8;
			color: #F60;
			cursor: pointer;
		}
	</style>

	<body>
		<div id="QueryStation">
			<div class="div2">
				<table width="354" border="0" cellspacing="0" cellpadding="0">
					<tr>
						<td width="118">
							<a href="gwgl1.html">
								<div class="div1">
									<h4 style="text-align:center; line-height:0"> 增加岗位</h4>
								</div>
							</a>
						</td>
						<td width="118">
							<a href="gwgl2.html">
								<div class="div1" style=" background-color:#F90">
									<h4 style="text-align:center; line-height:0"> 查询岗位</h4>
								</div>
							</a>
						</td>
						<td width="118">
							<a href="gwgl3.html">
								<div class="div1">
									<h4 style="text-align:center; line-height:0"> 查询岗位员工</h4>
								</div>
							</a>
						</td>
					</tr>
				</table>
			</div>
			<div class="div3">
				<form onsubmit="return false;">
					<hr /> 请选择查询方式：
					<select v-model="query_way">
						<option value="station_id">岗位编号</option>
						<option value="station_name">岗位名称</option>
						<option value="station_type">岗位类型</option>
						<option value="all">全部查询</option>
					</select>
					&nbsp; &nbsp;&nbsp;请输入查询条件：
					<input type="text" v-model="query_conditions" />
					<input type="button" value="提交" @click="QueryStation()" />
					<hr />
				</form>
				<div align="center">
					<table class="table">
						<tr>
							<td>岗位编号</td>
							<td>岗位名称</td>
							<td>岗位类型</td>
							<td>岗位编制</td>
							<td>修改</td>
							<td>删除</td>
						</tr>

						<tr v-for="item in stationList">
							<td v-text="item.station_id"></td>
							<td v-text="item.station_name"></td>
							<td v-text="item.station_type"></td>
							<td v-text="item.department_num"></td>
							<td>
								<a href="gwgl4.html">修改</a>
							</td>
							<td>
								<a href="#" @click="DeleteStation(item.station_id)">删除</a>
							</td>
						</tr>

					</table>

					共{{total}}条,当前是第{{pageNum}}页&nbsp;一共{{pages}}页
					<button @click="prePage()">上一页</button>
					<button @click="nextPage()">下一页</button>

					<h3 style="color:red;"></h3>
				</div>

			</div>
		</div>

		<script src="../js/axios.js"></script>
		<script src="../js/vue.js"></script>
		<script src="../js/jquery.js"></script>
		<script>
			axios.defaults.baseURL = "http://176.55.4.113"
			const QueryStation = new Vue({
				el: "#QueryStation",
				data: {
					stationList: [],
					query_way: 'station_id',
					query_conditions: '',
					total: '',
					pages: '',
					pageNum: '',
					pageSize: ''
				},
				methods: {
					QueryStation() {
						axios.get("/station/query?query_way=" + this.query_way + "&query_conditions=" + this.query_conditions + "&pageNum=" + this.pageNum + "&pageSize=" + this.pageSize)
							.then(result => {
								this.stationList = result.data.data.list
								this.total = result.data.data.total
								this.pages = result.data.data.pages
								this.pageNum = result.data.data.pageNum
								this.pageSize = result.data.data.pageSize
							})
					},
					prePage() {
						if(this.pageNum > 1) {
							axios.get("/station/query?query_way=" + this.query_way + "&query_conditions=" + this.query_conditions + "&pageNum=" + (this.pageNum - 1) + "&pageSize=" + this.pageSize)
								.then(result => {
									this.stationList = result.data.data.list
									this.total = result.data.data.total
									this.pages = result.data.data.pages
									this.pageNum = result.data.data.pageNum
									this.pageSize = result.data.data.pageSize
								})
						}
					},
					nextPage() {
						if(this.pageNum < this.pages) {
							axios.get("/station/query?query_way=" + this.query_way + "&query_conditions=" + this.query_conditions + "&pageNum=" + (this.pageNum + 1) + "&pageSize=" + this.pageSize)
								.then(result => {
									this.stationList = result.data.data.list
									this.total = result.data.data.total
									this.pages = result.data.data.pages
									this.pageNum = result.data.data.pageNum
									this.pageSize = result.data.data.pageSize
								})
						}
					},
					DeleteStation(id) {
						if(confirm('确定要删除吗') == true) {
							axios.delete("/station/delete?station_id=" + id)
								.then(result => {
									if(result.data.status == 200) {
										alert("删除成功")
										this.QueryStation()
									} else {
										alert("删除失败")
										this.QueryStation()
									}
								})
						} else {
							alert("删除失败")
						}
						this.QueryStation()
					}
				},
				mounted() {
					this.QueryStation()
				}
			})
		</script>
	</body>

</html>